import './index.scss'
import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { Button } from 'antd-mobile'
import { useEffect, useState } from 'react'
import { RightOutlined } from '@ant-design/icons'

function Yspb() {
    const navigate = useNavigate()
    const [isAnimating, setIsAnimating] = useState(false)
    const [isExpanded, setIsExpanded] = useState(false)

    useEffect(() => {
        const startAnimation = () => {
            setIsAnimating(true)
            // 动画持续6秒，动画结束后保持状态
            setTimeout(() => {
                setIsAnimating(false)
            }, 6000)
        }

        // 立即开始第一次动画
        startAnimation()

        // 每12秒重复一次动画
        const interval = setInterval(startAnimation, 12000)

        return () => clearInterval(interval)
    }, [])

    return (
        <div className='yspb'>
            <div className='yspb-top'>
                <span><LeftOutline className='yspb-top-left' onClick={() => navigate(-1)} /></span>
                <span className='yspb-top-title'>医生排班</span>
            </div>
            <div className='yspb-bg'>
                <div className='yspb-bg-one'>
                    <div className='yspb-bg-one-title'>
                        <img src="../../../public/59.png" alt="" className='yspb-bg-one-title-img' />
                        <div className='yspb-doctor-info'>
                            <div className='yspb-doctor-name'>刘医生</div>
                            <div className='yspb-doctor-title'>主任医师</div>
                        </div>
                        <div className='yspb-rating'>
                            <img src="../../../public/60.png" alt="" className='yspb-bg-one-title-img2'/>
                            <span className='yspb-bg-one-title-text5'>5.0</span>
                        </div>
                        <Button className='yspb-bg-one-title-button'>关注</Button>
                    </div>
                    <div className='yspb-bg-one-title-text-box'>
                        <span className='yspb-bg-one-title-text3'>门诊外一科</span>
                        <span className='yspb-bg-one-title-text4'>四川省保健院南苑</span>
                    </div>
                    <div className='yspb-bg-one-title-text-box2'>
                         <b>擅长:</b>
                         <span className='yspb-bg-one-title-text6'>肛肠外科(肛肠良性疾病),结直肠微创手术,肛肠疾病诊治,痔疮,肛瘘,肛裂等常见疾病的手术治疗...</span>
                    </div>
                </div>
                <div className='yspb-bg-one-title-text-box3'>
                    <div className='yspb-announcement'>
                        <div className='yspb-announcement-content'>
                            <span className='yspb-announcement-title'>医生公告</span>
                            <div className='yspb-announcement-text-container'>
                                <span className={`yspb-announcement-text ${isAnimating ? 'animate' : ''}`}>
                                    医生号源每日凌晨1点自动放号，请合理安排时间预约
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='yspb-bg-one-title-text-box4'>
                    <div className='yspb-schedule-header'>
                        <div className='yspb-schedule-title'>门诊外一科</div>
                        <div className='yspb-registration-fee'>挂号费 <span className='yspb-fee-amount'>¥20.00</span></div>
                    </div>
                    <div className='yspb-schedule-list'>
                        <div className='yspb-schedule-item'>
                            <div className='yspb-schedule-time'>2020-01-27 周一 上午</div>
                            <div className='yspb-schedule-availability'>有号</div>
                            <div className='yspb-schedule-status'>今日</div>
                            <div className='yspb-schedule-action'>预约</div>
                        </div>
                        <div className='yspb-schedule-item'>
                            <div className='yspb-schedule-time'>2020-01-27 周一 下午</div>
                            <div className='yspb-schedule-availability'>15号</div>
                            <div className='yspb-schedule-status'>今日</div>
                            <div className='yspb-schedule-action'>预约</div>
                        </div>
                        <div className='yspb-schedule-item'>
                            <div className='yspb-schedule-time'>2020-01-28 周二 上午</div>
                            <div className='yspb-schedule-availability'>20号</div>
                            <div className='yspb-schedule-status'>1天后</div>
                            <div className='yspb-schedule-action'>预约</div>
                        </div>
                        <div className='yspb-schedule-item'>
                            <div className='yspb-schedule-time'>2020-01-28 周二 下午</div>
                            <div className='yspb-schedule-availability unavailable'>无号</div>
                            <div className='yspb-schedule-status'>1天后</div>
                            <div className='yspb-schedule-action unavailable'>已约满</div>
                        </div>
                        <div className='yspb-schedule-item'>
                            <div className='yspb-schedule-time'>2020-01-29 周三 上午</div>
                            <div className='yspb-schedule-availability'>20号</div>
                            <div className='yspb-schedule-status'>2天后</div>
                            <div className='yspb-schedule-action'>预约</div>
                        </div>
                        
                        {/* 展开时显示的额外排班 */}
                        {isExpanded && (
                            <>
                                <div className='yspb-schedule-item'>
                                    <div className='yspb-schedule-time'>2020-01-29 周三 下午</div>
                                    <div className='yspb-schedule-availability'>有号</div>
                                    <div className='yspb-schedule-status'>2天后</div>
                                    <div className='yspb-schedule-action'>预约</div>
                                </div>
                                <div className='yspb-schedule-item'>
                                    <div className='yspb-schedule-time'>2020-01-30 周四 上午</div>
                                    <div className='yspb-schedule-availability'>12号</div>
                                    <div className='yspb-schedule-status'>3天后</div>
                                    <div className='yspb-schedule-action'>预约</div>
                                </div>
                                <div className='yspb-schedule-item'>
                                    <div className='yspb-schedule-time'>2020-01-30 周四 下午</div>
                                    <div className='yspb-schedule-availability'>有号</div>
                                    <div className='yspb-schedule-status'>3天后</div>
                                    <div className='yspb-schedule-action'>预约</div>
                                </div>
                                <div className='yspb-schedule-item'>
                                    <div className='yspb-schedule-time'>2020-01-31 周五 上午</div>
                                    <div className='yspb-schedule-availability'>有号</div>
                                    <div className='yspb-schedule-status'>4天后</div>
                                    <div className='yspb-schedule-action'>预约</div>
                                </div>
                                <div className='yspb-schedule-item'>
                                    <div className='yspb-schedule-time'>2020-01-31 周五 下午</div>
                                    <div className='yspb-schedule-availability unavailable'>无号</div>
                                    <div className='yspb-schedule-status'>4天后</div>
                                    <div className='yspb-schedule-action unavailable'>已约满</div>
                                </div>
                                <div className='yspb-schedule-item'>
                                    <div className='yspb-schedule-time'>2020-02-01 周六 上午</div>
                                    <div className='yspb-schedule-availability'>有号</div>
                                    <div className='yspb-schedule-status'>5天后</div>
                                    <div className='yspb-schedule-action'>预约</div>
                                </div>
                            </>
                        )}
                    </div>
                    <div className='yspb-schedule-footer' onClick={() => setIsExpanded(!isExpanded)}>
                        <span className='yspb-all-schedule'>{isExpanded ? '收起排班' : '全部排班'}</span>
                        <span className={`yspb-chevron ${isExpanded ? 'expanded' : ''}`}>▼</span>
                    </div>
                </div>
                <div className='yspb-bg-one-title-text-box5'>
                    <div className='yspb-recommended-doctors'>
                        <div className='yspb-recommended-title'>同科室有号医生推荐</div>
                        <div className='yspb-doctors-scroll-container'>
                            <div className='yspb-doctors-list'>
                                <div className='yspb-doctor-card'>
                                    <img src="../../../public/59.png" alt="杨医生" className='yspb-doctor-avatar' />
                                    <div className='yspb-doctor-info-card'>
                                        <div className='yspb-doctor-name-card'>杨医生</div>
                                        <div className='yspb-doctor-title-card'>副主任医师</div>
                                    </div>
                                </div>
                                <div className='yspb-doctor-card'>
                                    <img src="../../../public/59.png" alt="章医生" className='yspb-doctor-avatar' />
                                    <div className='yspb-doctor-info-card'>
                                        <div className='yspb-doctor-name-card'>章医生</div>
                                        <div className='yspb-doctor-title-card'>副主任医师</div>
                                    </div>
                                </div>
                                <div className='yspb-doctor-card'>
                                    <img src="../../../public/59.png" alt="李医生" className='yspb-doctor-avatar' />
                                    <div className='yspb-doctor-info-card'>
                                        <div className='yspb-doctor-name-card'>李医生</div>
                                        <div className='yspb-doctor-title-card'>主治医师</div>
                                    </div>
                                </div>
                                <div className='yspb-doctor-card'>
                                    <img src="../../../public/59.png" alt="王医生" className='yspb-doctor-avatar' />
                                    <div className='yspb-doctor-info-card'>
                                        <div className='yspb-doctor-name-card'>王医生</div>
                                        <div className='yspb-doctor-title-card'>主任医师</div>
                                    </div>
                                </div>
                                <div className='yspb-doctor-card'>
                                    <img src="../../../public/59.png" alt="陈医生" className='yspb-doctor-avatar' />
                                    <div className='yspb-doctor-info-card'>
                                        <div className='yspb-doctor-name-card'>陈医生</div>
                                        <div className='yspb-doctor-title-card'>副主任医师</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='yspb-bg-one-title-text-box6'>
                    <div className='yspb-patient-reviews'>
                        <div className='yspb-reviews-header'>
                            <div className='yspb-reviews-title'>患者评价</div>
                            <div className='yspb-reviews-count'>999+</div>
                        </div>
                        <div className='yspb-reviews-list'>
                            <div className='yspb-review-item'>
                                <div className='yspb-review-header'>
                                    <div className='yspb-patient-name'>张*</div>
                                    <div className='yspb-review-rating'>
                                        <span className='yspb-star'>★</span>
                                        <span className='yspb-star'>★</span>
                                        <span className='yspb-star'>★</span>
                                        <span className='yspb-star'>★</span>
                                        <span className='yspb-star'>★</span>
                                    </div>
                                </div>
                                <div className='yspb-review-content'>
                                    医生讲解的很清楚,对我这次的帮助很大，而且服务的态度也相当的好，感谢医生
                                </div>
                                <div className='yspb-review-time'>3天前</div>
                            </div>
                            <div className='yspb-review-item'>
                                <div className='yspb-review-header'>
                                    <div className='yspb-patient-name'>李**</div>
                                    <div className='yspb-review-rating'>
                                        <span className='yspb-star'>★</span>
                                        <span className='yspb-star'>★</span>
                                        <span className='yspb-star'>★</span>
                                        <span className='yspb-star'>★</span>
                                        <span className='yspb-star'>★</span>
                                    </div>
                                </div>
                                <div className='yspb-review-content'>
                                    医生讲解的很清楚,对我这次的帮助很大，而且服务的态度也相当的好，感谢医生
                                </div>
                                <div className='yspb-review-time'>2020-01-01</div>
                            </div>
                        </div>
                        <div className='yspb-reviews-footer'>
                            <span className='yspb-more-reviews'>更多评价 {<RightOutlined />}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Yspb